<template>
  <div class="model-form">
    <el-page-header @back="goBack" content="更新商家">
    </el-page-header>
    <div class="model-content">
      <el-form ref="ruleForm" :rules="rules" :model="form" label-width="160px">
        <el-row :gutter="10">
          <el-col :span="24">
            <el-form-item label="门头" prop="logo">
              <avatar v-model="form.logo"></avatar>
            </el-form-item>

          </el-col>
          <el-col :span="12">
            <el-form-item label="商家名称" prop="name">
              <el-input v-model="form.name" name="name">
              </el-input>
            </el-form-item>

          </el-col>
          <el-col :span="12">
            <el-form-item label="所属分类" prop="shopCatalog">
              <el-select style="width: 100%;" v-model="form.storeCatalog" filterable clearable
                         placeholder="请选择">
                <el-option v-for="item in shopCatalogOptions" :key="item.id"
                           :label="item.name" :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="地址" prop="address">
              <el-input v-model="form.address" name="address">
                <template #append>
                  <el-button type="primary" size="small" @click="geo">定位</el-button>
                </template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="地图信息">
              <qqmap zoom="18" @poi-change="changePoi" :lat="form.lat" :lng="form.lng"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="联系人" prop="contact">
              <el-input v-model="form.charge" name="contact">
              </el-input>
            </el-form-item>

          </el-col>
          <el-col :span="12">
            <el-form-item label="客服电话" prop="tel">
              <el-input v-model="form.phone" name="tel">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="会员福利" prop="note">
              <el-input v-model="form.privilege" name="note" type="textarea">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="商家详情" prop="note">
              <el-input v-model="form.note" name="note" type="textarea">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="22">
            <el-form-item>
              <el-button @click="goBack">取消</el-button>
              <el-button type="primary" @click="updateData">确定</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

    </div>
  </div>
</template>

<script setup>
import {ref} from "vue";

import avatar from "@/components/avatar.vue";
import qqmap from "@/components/qqmap.vue";
import {useGeo} from "@/utils/useGeo";
import {useData} from "@/utils/useData";
import {useUpdate} from "@/uses/useUpdate";

const form = ref({
  name: '',
  storeType: '',
  phone: '',
  rebate: '',
  address: '',
  privilege: '',
  note: '',
  charge: ""
})

const rules = ref({
  name: [
    {required: true, message: '请输入商家名称', trigger: 'blur'}
  ],
  phone: [
    {required: true, message: '请输入联系电话', trigger: 'blur'}
  ],
  backMoney: {
    required: true, message: '请输入刷脸以后返现金额', trigger: 'blur'
  }
})

const ruleForm = ref(null);

const {updateData, goBack} = useUpdate("store", form, ruleForm)
const {geo, changePoi} = useGeo(form);
const {listData: shopCatalogOptions} = useData("/storeCatalog/list")

</script>

<style scoped>

</style>
